<template>
  <div>
    <div class="weui-cells__title">
      银行卡信息
      <div class="xiugai" v-show="isDisabled" @click="revise">
        <img src="../../../../static/images/shiming/pen.png" alt="">
        修改
      </div>
    </div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">银行卡号</label></div>
        <div class="weui-cell__bd">
          <p v-show="isDisabled">{{bankCardNo | cipherBank}}</p>
          <input class="weui-input" type="text" :disabled="isDisabled" v-model="bankCardNo" v-show="!isDisabled"/>
        </div>
      </div>

      <!--<div class="weui-cell">-->
        <!--<div class="weui-cell__hd"><label class="weui-label">开户银行</label></div>-->
        <!--<div class="weui-cell__bd">-->
          <!--<input class="weui-input" type="text" :disabled="isDisabled" v-model="bankName"/>-->
        <!--</div>-->
      <!--</div>-->

      <div class="weui-cell weui-cell_select weui-cell_select-after" :class="{disabled:isDisabled}">
        <div class="weui-cell__hd">
          <label class="weui-label">开户银行</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select" v-model="bankName" :disabled="isDisabled">
            <option value="工行">工行</option>
            <option value="农行">农行</option>
            <option value="招商银行">招商银行</option>
            <option value="湖北银行">湖北银行</option>
          </select>
        </div>
      </div>

      <!--<div class="weui-cell">-->
        <!--<div class="weui-cell__hd"><label class="weui-label">开户省市</label></div>-->
        <!--<div class="weui-cell__bd">-->
          <!--<input class="weui-input" type="text" :disabled="isDisabled"/>-->
        <!--</div>-->
      <!--</div>-->
      <div class="weui-cell weui-cell_access" :class="{disabled:isDisabled}">
        <div class="weui-cell__hd">
          <label class="weui-label">开户省市</label>
        </div>
        <div class="weui-cell__bd weui-cell__ft" @click="getArea">
          {{bankCityName?bankProvinceName +' '+ bankCityName:''}}
        </div>
      </div>


      <!--<div class="weui-cell">-->
        <!--<div class="weui-cell__hd"><label class="weui-label">开户支行</label></div>-->
        <!--<div class="weui-cell__bd">-->
          <!--<input class="weui-input" type="text" value="武昌 积玉桥 万达12楼" :disabled="isDisabled" v-model="bankSubName"/>-->
        <!--</div>-->
      <!--</div>-->
      <div class="weui-cell weui-cell_select weui-cell_select-after" :class="{disabled:isDisabled}">
        <div class="weui-cell__hd">
          <label class="weui-label">开户支行</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select" :disabled="isDisabled" v-model="bankSubName">
            <option value="湖北支行">湖北支行</option>
            <option value="江西支行">江西支行</option>
            <option value="浙江支行">浙江支行</option>
          </select>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">预留手机号</label></div>
        <div class="weui-cell__bd">
          <p v-show="isDisabled">{{mobileNo | cipherPhone}}</p>
          <input v-show="!isDisabled" class="weui-input" type="number" pattern="[0-9]*" :disabled="isDisabled" v-model="mobileNo"/>
        </div>
      </div>

    </div>

    <div class="btn-box" v-show="isDisabled">
      <button class="weui-btn weui-btn_warn" @click="goBack">确认</button>
    </div>
    <div class="btn-box xiugai-btn" v-show="!isDisabled">
      <button class="weui-btn weui-btn_plain-default" @click="cancel">取消</button>
      <button class="weui-btn weui-btn_warn" @click="modifyBankCard">提交审核</button>
    </div>


    <!--地址框-->
    <div :class="{actionsheetToggle:isSelectArea}">
      <div class="weui-mask_transparent actionsheet__mask"></div>
      <div class="weui-actionsheet">
        <div class="weui-actionsheet__menu">
          <div class="weui-cell">
            <div class="weui-cell__bd title">
              <p>请选择开户省市</p>
              <span class="weui-icon-cancel" @click="closeAreaBox"></span>
            </div>
          </div>
          <v-distpicker type="mobile" hide-area @selected="onSelected"></v-distpicker>
        </div>
      </div>
    </div>

    <!--弹出框-->
    <!--<div class="dialog" style="display: none">-->
      <!--<div class="weui-mask"></div>-->
      <!--<div class="weui-dialog">-->
        <!--<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>-->
        <!--<div class="weui-dialog__bd">-->
          <!--<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入您已绑定的银行卡号">-->
        <!--</div>-->
        <!--<div class="weui-dialog__ft">-->
          <!--<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" >取消</a>-->
          <!--<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" >确认</a>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->



  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
  import {queryCardDetail,modifyUserBankCard} from "../../../assets/js/getData";
  export default {
    name: "bankInfo",
    data(){
      return {
        isDisabled:true,
        isSelectArea:false,

        bankCardNo:null,
        bankName:null,
        bankSubName:null,
        mobileNo:null,
        bankProvinceName:null,
        bankCityName:null,
        // bankCardType:null,
      }
    },
    created(){
      this.getCardDetail();
    },
    filters: {
      cipherBank: (value) => {
        if(!value){
          return value;
        }
        value = value.replace(/^(\w{4})\w{8}(.*)$/, '$1**** **** ****$2');
        return value;
      },
      cipherPhone: (value) => {
        if(!value){
          return value;
        }
        value = value.replace(/^(\w{3})\w{4}(.*)$/, '$1****$2');
        return value;
      }
    },
    methods:{
      //省市选择选最后一项时触发
      onSelected(data){
        this.bankProvinceName = data.province.value;
        this.bankCityName = data.city.value;
        this.isSelectArea = false;
      },
      //点击选择地区显示省市列表框
      getArea(){
        if(this.isDisabled){
          return;
        }
        this.isSelectArea = true;
      },
      //关闭选择地区框
      closeAreaBox(){
        this.isSelectArea = false;
      },
      //点击修改
      revise(){
        MessageBox.prompt(' ','银行卡信息验证',{
          showInput:true,
          inputType:'number',
          inputPlaceholder:'请输入您已绑定的银行卡号',
        }).then(({value}) => {
          if(value==this.bankCardNo){
            this.isDisabled = false;
          }else {
            Toast('输入的银行卡号与原绑定的银行卡号不符，请重新输入');
          }
        }).catch(()=>{})
      },
      //修改银行卡信息提交审核
      modifyBankCard(){
        let params = {
          bankCardNo:this.bankCardNo,
          bankName:this.bankName,
          bankSubName:this.bankSubName,
          mobileNo:this.mobileNo,
          bankProvinceName:this.bankProvinceName,
          bankCityName:this.bankCityName,
          // bankCardType:this.bankCardType,
        };
        modifyUserBankCard(params).then(res => {
          if(res.data.reqResult.code > 0){
            console.log(res);
            this.isDisabled = true;
            this.getCardDetail();
          }else {
            Toast(res.data.reqResult.msg);
          }
        });
      },
      //取消修改
      cancel(){
        this.isDisabled = true;
        this.getCardDetail();
      },
      goBack(){
        this.$router.go(-1)
      },
      //获取银行卡信息
      getCardDetail(){
        queryCardDetail().then(res => {
          if(res.data.reqResult.code > 0){
            let cardDetail = res.data.data;
              this.bankCardNo = cardDetail.bankCardNo;
              this.bankName = cardDetail.bankName;
              this.bankSubName = cardDetail.bankSubName;
              this.mobileNo = cardDetail.mobileNo;
              this.bankProvinceName = cardDetail.bankProvinceName;
              this.bankCityName = cardDetail.bankCityName;
              // this.bankCardType = cardDetail.bankCardType;
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      }
    }
  }
</script>

<style scoped>
  .weui-cell{
    padding: 0 0.65rem;
    height: 2.5rem;
    line-height: 2.5rem;
  }
  .weui-select{
    height: 2.5rem;
    color: #1A1A1A;
  }
  .weui-select option{
    color: #1A1A1A;
  }
  .weui-cells_form .weui-cell__ft{
    text-align: left;
    font-size: 0.7rem;
    height: 100%;
  }
  .weui-cell_access:active{
    background-color: #FFFFFF;
  }
  .disabled .weui-cell__bd:after,.disabled .weui-cell__ft:after{
    display: none;
  }
  .weui-cells__title{
    display: flex;
    justify-content: space-between;
  }
  .xiugai{
    color: #C50000;
    font-size: 0.7rem;
  }
  .xiugai img{
    width: 0.7rem;
  }
  .btn-box{
    padding: 0 0.65rem;
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
  }
  .xiugai-btn{
    display: flex;
    justify-content: space-between;
  }
  .xiugai-btn .weui-btn_plain-default{
    line-height: 2rem;
    font-size: 0.8rem;
    color: #666666;
    border-radius: 3px;
    width: 5.25rem;
  }
  .xiugai-btn .weui-btn_warn{
    width: 11.4rem;
  }
  .weui-btn + .weui-btn {
    margin-top: 0;
  }
  .weui-dialog__hd{
    padding-top: 1.65rem;
    padding-bottom: 1rem;
  }
  .weui-dialog__title{
    color: #343434;
    font-size: 0.85rem;
  }
  .weui-dialog__bd{
    padding: 0 2rem;
    padding-bottom: 1.2rem;
  }
  .weui-dialog__bd .weui-input{
    height: 1.85rem;
    line-height: 1.85rem;
    border: 1px solid #ababab;
    border-radius: 3px;
    padding: 0.4rem 0.9rem;
    box-sizing: border-box;
  }

  .weui-mask_transparent{
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: none;
  }
  .actionsheetToggle .weui-mask_transparent{
    opacity: 1;
    display: block;
  }
  .actionsheetToggle .weui-actionsheet {
    transform: translate(0, 0);
  }
  .weui-actionsheet__menu .title{
    text-align: center;
  }
  .weui-actionsheet__menu .title .weui-icon-cancel{
    position: absolute;
    top: 0;
    right: 0;
  }
  .select-area{
    display: flex;
    justify-content: space-around;
  }
</style>
